/**
 * Tiem: 2023-2-9
 * FileName: After Sales Detail 
 * Editor: Haidong
 */

import React, { Component } from "react";
import { Space, Table, Typography } from "antd";
import goBack from '@/assets/icons/goBack.png';
import { getHotelSalesReturnView } from '@/request/hotelOrder';
import TheImage from '@/components/TheImage'
import "../style/index.less";

const { Title } = Typography;
export default class AfterSalesDetail extends Component {
    constructor(props) {
        super();
        this.state = {
            hotelSalesReturnId: props.match.params.id,
            roomColumns: [
                {
                    title: "房间名称",
                    dataIndex: "serviceName",
                    key: "serviceName",
                    align: 'center'
                },
                {
                    title: "房间号码",
                    dataIndex: "roomName",
                    key: "roomName",
                    align: 'center'
                },
                {
                    title: "房间价格",
                    dataIndex: "detailPrice",
                    key: "detailPrice",
                    align: 'center',
                    render: (text) => {
                        return <React.$price price={text || 0} />
                    }
                },
                {
                    title: "入住日期",
                    dataIndex: "beginTime",
                    key: "beginTime",
                    align: 'center'
                },
                {
                    title: "离店日期",
                    dataIndex: "endTime",
                    key: "endTime",
                    align: 'center'
                },
                {
                    title: "入住天数",
                    dataIndex: "days",
                    key: "days",
                    align: 'center'
                },
            ],
            feesColumns: [
                {
                    title: "房间名称",
                    dataIndex: "serviceName",
                    key: "serviceName",
                    align: 'center'
                },
                {
                    title: "房间号码",
                    dataIndex: "roomName",
                    key: "roomName",
                    align: 'center'
                },
                {
                    title: "房间价格",
                    dataIndex: "detailPrice",
                    key: "detailPrice",
                    align: 'center',
                    render: (text) => {
                        return <React.$price price={text || 0} />
                    }
                },
                {
                    title: "入住日期",
                    dataIndex: "detailDate",
                    key: "detailDate",
                    align: 'center'
                },
                // {
                //     title: "离店日期",
                //     dataIndex: "returnCode",
                //     key: "returnCode",
                //     align:'center'
                // },
                {
                    title: "入住状态",
                    dataIndex: "checkInStatus",
                    key: "checkInStatus",
                    align: 'center',
                    render: (text) => {
                        return text === 0 ? "未入住" : "已入住"
                    }
                },
                // {
                //     title: "入住天数",
                //     dataIndex: "returnCode",
                //     key: "returnCode",
                //     align:'center'
                // },
            ],
            roomData: [],
            feesData: [],
            orderData: ""
        }
    }

    //Initialization
    componentDidMount() {
        this.getData()
    }

    //CTRL
    getData = async () => {
        const hotelSalesReturnId = this.state.hotelSalesReturnId;
        let res = await getHotelSalesReturnView(hotelSalesReturnId)
        if (res.code === 0 && res.data) {
            let roomData = [
                {
                    roomName: res.data.hotelOrderDetailVoList[0].roomName,
                    serviceName: res.data.hotelOrderDetailVoList[0].serviceName,
                    detailPrice: res.data.hotelOrderDetailVoList[0].detailPrice,
                    beginTime: res.data.beginTime,
                    endTime: res.data.endTime,
                    days: res.data.days,
                }
            ]
            this.setState({
                orderData: res.data,
                feesData: res.data.hotelOrderDetailVoList,
                roomData
            })
        }
        console.log(this.state.orderData);
    }

    //VIEW
    render() {
        const { roomColumns, feesColumns, orderData, roomData, feesData } = this.state
        let payWay = ''
        switch (orderData.payWay) {
            case 'WeChat':
                payWay = '微信'
                break;
            case 'Alipay':
                payWay = '支付宝'
                break;
            case 'UnionPay':
                payWay = "银联"
                break;
            case 'YsPay':
                payWay = "银行卡支付"
                break;
            case 'Cash':
                payWay = "现金"
                break;
            case 'Wallet':
                payWay = "余额"
                break;
            case 'Fix':
                payWay = "混合支付"
                break;
            case 'RemoteAlipay':
                payWay = "扫码支付（支付宝）"
                break;
            case 'RemoteWeChat':
                payWay = "扫码支付（微信）"
                break;
            default:
                payWay = "未知支付方式"
                break;
        }
        let salesReturnStatus = ''
        switch (orderData.salesReturnStatus) {
            case '1':
                salesReturnStatus = '退款中'
                break;
            case '4':
                salesReturnStatus = '退款失败'
                break;
            case '9':
                salesReturnStatus = '退款成功'
                break;
            case '0':
                salesReturnStatus = '退款关闭'
                break;
            default:
                break;
        }
        return (
            <div className="pagebgnull">
                <div className="order Info">
                    <Space>
                        <img className="goback" alt="返回" src={goBack} onClick={() => { this.props.history.goBack() }} />
                        <Title level={4}>售后信息</Title>
                    </Space>
                    <table>
                        <tr>
                            <th className="label">订单编号：</th>
                            <td>{orderData.orderCode}</td>
                            <th className="label">订单来源：</th>
                            <td>{orderData.isOffLine === 0 ? "哈奇马APP预订" :orderData.isOffLine === 1? "酒店收银台":'微信小程序'}</td>
                            <th className="label">售后状态：</th>
                            <td>{salesReturnStatus}</td>
                            <th className="label">支付方式：</th>
                            <td>{payWay}</td>
                        </tr>
                        <tr>
                            <th className="label">下单日期：</th>
                            <td>{orderData.placeOrderTime}</td>
                            <th className="label">售后原因：</th>
                            <td>{orderData.remark}</td>
                            <th className="label">申请时间：</th>
                            <td colSpan={3}>{orderData.applyTime}</td>
                        </tr>
                        <tr>
                            <th className="label">备注信息：</th>
                            <td colSpan={3}>{orderData.reason}</td>
                            <th className="label">售后凭证：</th>
                            <td colSpan={3}>{orderData.returnDocuments ? <TheImage alt="售后凭证" width={100} height={100} src={orderData.returnDocuments} /> : null}</td>
                        </tr>
                    </table>
                </div>
                <div className="pet Info">
                    <table >
                        <tr>
                            <th className="label">宠主姓名：</th>
                            <td>{orderData.memberName}</td>
                            <th className="label">手机号码：</th>
                            <td colSpan={5}>{orderData.memberPhone}</td>
                        </tr>
                        <tr>
                            <th className="label">宠物信息：</th>
                            <td>{orderData.petName}</td>
                            <th className="label">宠物品种：</th>
                            <td>{orderData.petVarieties}</td>
                            <th className="label">宠物生日：</th>
                            <td>{orderData.birthday}</td>
                            <th className="label">宠物性别：</th>
                            <td>{orderData.petSex === 1 ? "公" : "母"}</td>
                        </tr>
                        <tr>
                            <th className="label">绝育信息：</th>
                            <td>{orderData.sterilizationStatus === 'Y' ? "已绝育" : "未绝育"}</td>
                            <th className="label">疫苗信息：</th>
                            <td colSpan={5}>{orderData.vaccineStatus === 'Y' ? "已接种" : "未接种"}</td>
                        </tr>
                    </table>
                </div>
                <div className="room Info">
                    <Title level={5} >房间信息</Title>
                    <div className="roommsg">
                        <Table columns={roomColumns} dataSource={roomData} bordered pagination={false} />
                    </div>
                    <Title level={5} >费用信息</Title>
                    <div className="roomfees">
                        <Table columns={feesColumns} dataSource={feesData} bordered pagination={false} />
                    </div>
                    <div className="total">
                        <Space size={'large'}>
                            <div>共计入住：{orderData.days + 1 + '天' + orderData.days + '晚'}</div>
                            <div>费用总计：{orderData.orderTotalPrice ? '￥' + (orderData.orderTotalPrice / 100).toFixed(2) : 0}</div>
                            <div>实际支付：{orderData.orderPayPrice ? '￥' + (orderData.orderPayPrice / 100).toFixed(2) : 0}</div>
                            <div>退款金额：{orderData.returnPrice ? '￥' + (orderData.returnPrice / 100).toFixed(2) : 0}</div>
                        </Space>
                    </div>
                    {/* <Title level={4} >信息备注</Title>
                    <div className="remarkmsg">
                        操作人员：李同学   已同意该订单退款，并操作房态信息，并告知用户当前退款金额等信息。
                    </div> */}
                </div>
            </div>
        )
    }

}